<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-08-23 14:55:27
 * @LastEditors: voanit
 * @LastEditTime: 2022-08-29 11:15:52
-->
<template>
  <div>
    <!-- 1. 搜索模块 -->
    <ugo-search />
    <!-- 模块2:分类内容  轻触 -->
    <view class="category">
      <scroll-view scroll-y class="category-left">
        <view @tap="changeLight(index)" :class="['category-item', activeIndex === index ? 'active' : '']"
          v-for="(item, index) in  cateList" :key="item.cat_id">{{ item.cat_name }}</view>
      </scroll-view>
      <scroll-view scroll-y class="category-right">
        <view class="right-item" v-for="item2 in rightData" :key="item2.cat_id">
          <view class="title">{{ item2.cat_name }}</view>
          <view class="main-box">
            <navigator :url='"/pagesGoods/goods_list/goods_list?cat_id=" + item3.cat_id' class="img-box"
              v-for="item3 in item2.children" :key='item3.cat_id'>
              <image :src="item3.cat_icon"></image>
              <text>{{ item3.cat_name }}</text>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </div>
</template>
<script>
export default {
  name: '',
  data () {
    return {
      cateList: [],
      activeIndex: 0,
      rightData: []
    }
  },
  onLoad () {
    this.getCate()
  },
  methods: {
    async getCate () {
      const res = await uni.$u.http.request({
        url: '/categories'
      })
      // console.log(res, 8);
      this.cateList = res.data.message
      // 右边的数据
      this.rightData = this.cateList[0].children
    },
    changeLight (index) {
      console.log(index, 9);
      // 高亮
      this.activeIndex = index
      // 数据切换
      this.rightData = this.cateList[index].children

    }
  }
}
</script>
<style lang='scss'  scoped>
/* 编译成 页面.wxss */
.category {
  width: 100vw;
  height: calc(100vh - 44px);

  // height: 100vh;
  /* 100vh 为视口高，44px 为搜索框高 */
  // background-color: pink;
  display: flex;

  .category-left {
    width: 184rpx;
    height: 100%;
    font-size: 12px;

    .category-item {
      text-align: center;
      padding: 10px 0;
      background-color: #f3f3f3;

      &.active {
        color: #ea4350;
        position: relative;
      }

      &.active::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 20px;
        background: #ea4350;
      }
    }
  }

  .category-right {
    flex: 1;
    height: 100%;

    .right-item {
      .title {
        text-align: center;
        padding: 10px 0;
      }

      .main-box {
        display: flex;
        flex-wrap: wrap;

        .img-box {
          width: 180rpx;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          image {
            width: 120rpx;
            height: 120rpx;
          }

          text {
            font-size: 12px;
          }
        }
      }

    }

  }
}
</style>
